<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box1 {
            width: 700px;
            margin: 50px auto 0;

        }

        input {
            width: 650px;
            height: 40px;
            border: 0;
            outline: none;
            background-color: skyblue;
            caret-color: black;
            font-size: 30px;
            /* font-weight: 800; */
        }

        .box1 button {
            width: 46px;
            height: 40px;
            border: 0;
            cursor: pointer;
        }

        ul {
            width: 700px;
            margin: 0 auto;
        }

        li {
            width: 700px;
            height: 30px;
            border: 1px dashed black;
            line-height: 30px;
        }

        li+li {
            border-top: 0;
        }

        .box {
            width: 700px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="box1">
        <input type="text">
        <button>搜索</button>

    </div>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
    </ul>

    <div class="box">
        <button class="setHtml">
            设置html
        </button>
        <button class="getHtml">
            获取html
        </button>
        <button class="setWidth">
            设置宽度
        </button>
        <button class="getWidth">
            获取宽度
        </button>
        <button class="hide">隐藏</button>
        <button class="show">显示</button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="css">css</button>
        <button class="eq">第一个</button>
        <button class="siblings">siblings</button>
    </div>
    <script>
        function GetEle(ele) {
            this.eles = document.querySelectorAll(ele);
            // console.log(this);
        }
        GetEle.prototype.html = function (con) {
            // var ele = this.eles

            if (arguments.length >= 1) {
                // console.log(this.eles);
                this.each(function (i, ele) {
                    // console.log(ele);
                    ele.innerText = con;
                })
            } else {
                return this.eles[0].innnerHTML
            }

        }
        GetEle.prototype.each = function (fn) {
            // this -> 调用此方法的实例化对象
            // 遍历的是 实例化对象中的集合 this.eles
            for (var i = 0; i < this.eles.length; i++) {
                var ele = this.eles[i];  //循环的当前原始数据
                var index = i;   // 循环的当前下标

                // 遍历 集合 每次循环时执行传入的回调函数
                // fn(ele, index);   //传统 forEach
                fn(index, ele);     // jquery中第一个是下标,第二个是当前元素
            }
        }
        GetEle.prototype.click = function (fn) {
            this.each(function (i, ele) {
                ele.onclick = fn
            })
            // return this

        }

        //第一个作用   2个参数设置实例的css的样式
        //第二个作用    一个参数获取样式
        //第三个作用   传入一个参数如果是object就解析obj设位置css样式
        GetEle.prototype.css = function (key, val) {
            // var key = key
            if (arguments.length > 1) {
                this.each(function (i, ele) {
                    ele.style[key] = val
                })
            } else if (arguments[0] == Object) {
                for (var x in arguments) {
                    var ys = arguments[x]
                    this.eles.each(function (i, ele) {
                        ele.style.arguments[x] = ys
                    })
                }
            } else {
                return this.else[0].style.key
            }
        }



        // console.log(new GetEle("li"));
        function $(select) {
            return new GetEle(select)
        }
        $("li").html("222")
        // $("li").css("background"++++++              , "gold")
        $(".css").click(function () {
            $("li").css("background", "gold")
        })
        // var x = new GetEle("li")
        // x.html("222")
    </script>
</body>

</html>